<template>
  <ElContainer style="height: 100%">
    <ElMain>
      <vue3-pro-table ref="tableRef" style="width: 100%" :request="getList" :columns="state.columns"
        :search="state.search" @row-click="handleRowClick">
        <template #operate="scope">
          <el-button type="primary" icon="Tickets" @click="editRow(scope.row)">
            编辑</el-button>
          <el-button type="danger" icon="Delete" @click="delRow(scope.row)">
            删除</el-button>
        </template>
        <template #a00_03_07="scope">
          {{ dictModel.a00_03_07[scope.row.a00_03_07] }}
        </template>
        <template #a00_03_16="scope">
          {{ dictModel.a00_03_16[scope.row.a00_03_16] }}
        </template>
      </vue3-pro-table>
    </ElMain>
  </ElContainer>
  <MyDialog v-bind="editDialog" v-model:visible="editDialog.visible">
    <PersonalArchives ref="dialogRef" :data="personalArchive" />
  </MyDialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { delProfilesInfoById, getProfilesInfoByCardId, getProfilesList } from "@/api/archives";
import { a00_03 } from "@/dict";
import { IA00_03 } from "@/model";
import PersonalArchives from "../PersonalArchives/index.vue";
import { cloneDeep } from "lodash-es";
const emit = defineEmits(["rowClick"]);
const dictModel = reactive(a00_03);
const tableRef = ref();
const state = reactive({
  columns: [
    { label: "姓名", prop: "a00_03_05" },
    { label: "性别", prop: "a00_03_07", tdSlot: "a00_03_07" },
    { label: "民族", prop: "a00_03_16", tdSlot: "a00_03_16" },
    { label: "身份证号", prop: "a00_03_10" },
    { label: "生日", prop: "a00_03_09" },
    { label: "电话", prop: "a00_03_12" },
    { label: "建档日期", prop: "a00_03_53" },
    {
      label: "操作",
      fixed: "right",
      width: 200,
      align: "center",
      tdSlot: "operate", // 自定义单元格内容的插槽名称
    },
  ],
  search: {
    fields: [
      {
        type: "text",
        label: "姓名/身份证号",
        name: "name",
      },
    ],
  },
});
const personalArchive = ref<IA00_03>();
const dialogRef = ref();
const editDialog = ref({
  visible: false,
  handleConfirmClick: async () => {
    await dialogRef.value.save();
    tableRef.value.refresh();
    return true;
  },
});
const editRow = async (row: any) => {
  editDialog.value.visible = false;
  personalArchive.value = await getProfilesInfoByCardId(row.a00_03_10);
  editDialog.value.visible = true;
};
const delRow = async (row) => {
  const data = await delProfilesInfoById(row.id);
  tableRef.value.refresh();
};

const handleRowClick = (row) => {
  console.log("row-click", row);
  emit("rowClick", row);
};

// 请求函数
const getList = async (params) => {
  // params是从组件接收的，包含分页和搜索字段。
  const { total, data } = await getProfilesList(params);

  // 必须要返回一个对象，包含data数组和total总数
  return {
    data: data,
    total: total,
  };
};
</script>

<style scoped>

</style>
